{include="header"}

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
   // Load the Visualization API and the piechart package.
   google.load('visualization', '1.0', {'packages':['corechart']});
   
   // Set a callback to run when the Google Visualization API is loaded.
   google.setOnLoadCallback(drawChart);
   
   // Callback that creates and populates a data table,
   // instantiates the pie chart, passes in the data and
   // draws it.
   function drawChart()
   {
      // Create the data table.
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'día');
      data.addColumn('number', 'ventas {$fsc->simbolo_divisa()}');
      data.addColumn('number', 'compras {$fsc->simbolo_divisa()}');
      data.addRows([
      {loop="$fsc->stats_last_days()"}
         ['{$value['day']}', {$value['total_cli']}, {$value['total_pro']}],
      {/loop}
      ]);
      
      // Instantiate and draw our chart, passing in some options.
      var chart = new google.visualization.ColumnChart(document.getElementById('chart_facturas_day'));
      chart.draw(data);
      
      // Create the data table.
      var data2 = new google.visualization.DataTable();
      data2.addColumn('string', 'mes');
      data2.addColumn('number', 'ventas {$fsc->simbolo_divisa()}');
      data2.addColumn('number', 'compras {$fsc->simbolo_divisa()}');
      data2.addRows([
      {loop="$fsc->stats_last_months()"}
         ['{$value['month']}', {$value['total_cli']}, {$value['total_pro']}],
      {/loop}
      ]);
      
      // Instantiate and draw our chart, passing in some options.
      var chart2 = new google.visualization.AreaChart(document.getElementById('chart_facturas_month'));
      chart2.draw(data2);
      
      // Create the data table.
      var data3 = new google.visualization.DataTable();
      data3.addColumn('string', 'año');
      data3.addColumn('number', 'ventas {$fsc->simbolo_divisa()}');
      data3.addColumn('number', 'compras {$fsc->simbolo_divisa()}');
      data3.addRows([
      {loop="$fsc->stats_last_years()"}
         ['{$value['year']}', {$value['total_cli']}, {$value['total_pro']}],
      {/loop}
      ]);
      
      // Instantiate and draw our chart, passing in some options.
      var chart3 = new google.visualization.AreaChart(document.getElementById('chart_facturas_year'));
      chart3.draw(data3);
   }
</script>

<div class="panel panel-default" style="margin: 5px;">
   <div class="panel-heading">
      <h3 class="panel-title"><span class="text-capitalize">{#FS_ALBARANES#}</span> de los últimos días</h3>
   </div>
   <div class="panel-body">
      <div id="chart_facturas_day" style="width: 95%; margin-left: auto; margin-right: auto;"></div>
   </div>
</div>

<div class="panel panel-default" style="margin: 5px;">
   <div class="panel-heading">
      <h3 class="panel-title"><span class="text-capitalize">{#FS_ALBARANES#}</span> de los últimos meses</h3>
   </div>
   <div class="panel-body">
      <div id="chart_facturas_month" style="width: 95%; margin-left: auto; margin-right: auto; height: 300px;"></div>
   </div>
</div>

<div class="panel panel-default" style="margin: 5px;">
   <div class="panel-heading">
      <h3 class="panel-title"><span class="text-capitalize">{#FS_ALBARANES#}</span> de los últimos años</h3>
   </div>
   <div class="panel-body">
      <div id="chart_facturas_year" style="width: 95%; margin-left: auto; margin-right: auto; height: 300px;"></div>
   </div>
</div>

{include="footer"}